{% extends './layout.html' %}
{% import '../widght/pagination.html' as pagination %}
{% block title %}
<title>大雄的个人博客</title>
<meta name="description" content="大雄的前端学习之路">
<meta name="keywords" content="前端、技术博客">
{% endblock %}
{% set navActive = 'index' %}
{% block content %}
<link rel="stylesheet" href="/css/pc/index.css">
<div class="banner">
  <h1 class="title">学无止境</h1>
  <p class="description">书山有路勤为径，学海无涯苦作舟</p>
</div>
<div class="blog-main">
  <!-- 左侧博客列表及分页 -->
  <div class="blog-container">
    <!-- 博客列表 -->
    <div class="blog-list-content">
      <ul>
        {% for item in blogList %}
        <li class="blog-item-box bg-white">
          <h3 class="blog-title">
            <a href="/blog/{{item.id}}">
              {{item.title}}
            </a>
          </h3>
          <div class="blog-info">
            {{item.createdAt}}
          </div>
          <div class="blog-synopsis">
            {{item.synopsis}}
          </div>
          <a class="see-button" href="/blog/{{item.id}}">
            查看全文
          </a>
        </li>
        {% endfor %}
      </ul>
    </div>
    {{
    pagination.pagination(
    pageIndex = pageIndex,
    count = total,
    api = api
    )
    }}
  </div>
  <!-- 右侧个人信息栏 -->
  <div class="my-info bg-white info-top">
    <div class="avatar-box">
      <img class="avatar-photo" src="/images/avatar.jpg" alt="头像">
    </div>
    <div class="author">
      daxiong
    </div>
    <div class="avatar-info">
      <span class="blog-num">
        {{total}}
      </span>
      <p class="blog-text">
        Article
      </p>
    </div>
  </div>
</div>
{% endblock %}
{% block jscontent %}
<script>
  function changeInfoSize () {
    let topRange = document.documentElement.scrollTop
    if (topRange > 400) {
      $('.my-info').removeClass('info-top').addClass('info-center')
    }else {
      $('.my-info').removeClass('info-center').addClass('info-top')
    }
  }
  window.addEventListener('scroll', changeInfoSize);
</script>

{% endblock %}